<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>网页表格</title>
</head>
<body>
<!--table表格的开始与结束 border表格边框-->
<table border="1px" style="border-collapse: collapse;">
  <caption>爱好表</caption>
  <!--tr表格行 table row-->
  <tr>
    <!--th表格标题 文字加粗居中-->
    <th>序号</th>
    <th>姓名</th>
    <th>爱好</th>
  </tr>
  <tr>
    <!--单元格 table datacell 真正存放数据的地方 一行有几个单元格就有几列-->
    <td>1</td>
    <td>传奇</td>
    <td>玩偶</td>
  </tr>
  <tr>
    <td>2</td>
    <td>伟超</td>
    <td>丽颖啊赵丽颖</td>
  </tr>
  <tr>
    <td>3</td>
    <td>硕博</td>
    <td>伟超</td>
  </tr>
</table>
<table border="1px">
  <tr>
    <td>1-1</td>
    <td>1-2</td>
    <td>1-3</td>
    <td>1-4</td>
  </tr>
  <tr>
    <!-- colspan横着合并,跨列 从当前单元格开始向右合并n个单元格-->
    <!-- rowspan竖着合并,跨行 从当前单元格开始向下合并n个单元格-->
    <!-- 注意:被合并的单元格一定得删掉!-->
    <td colspan="2">2-1</td>
    <!-- <td>2-2</td>-->
    <td>2-3</td>
    <td rowspan="3">2-4</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
    <!--        <td>3-4</td>-->
  </tr>
  <tr>
    <td>4-1</td>
    <td>4-2</td>
    <td>4-3</td>
    <!--        <td>4-4</td>-->
  </tr>
</table>

<table border="1ox" style="border-collapse: collapse;">
  <caption>购物车</caption>
  <tr>
    <th>商品编号</th>
    <th>商品名称</th>
    <th>商品价格</th>
  </tr>
  <tr>
    <td>1</td>
    <td>小米Air</td>
    <td>5877</td>
  </tr>
  <tr>
    <td>2</td>
    <td>华为遥遥领先</td>
    <td>8877</td>
  </tr>
  <tr>
    <td>总价:</td>
    <td colspan="2">10000</td>
  </tr>
</table>
</body>
</html>